<template>
	<view>
		<span v-show="mainflag" >
			
			
			<div  v-show="showflag">
				<scroll-view scroll-x class="bg-white nav my-nav " scroll-with-animation :scroll-left="scrollLeft">
					<view class="cu-item" :class="item.id==TabCur?'text-green cur':''" v-for="(item,index) in reportType" :key="index" @tap="tabSelect(item.id)">
						{{item.type}}
					</view>
				</scroll-view>
				<view style="width: 100%;height: 100%;background-color: #FFFFFF;">
					<!-- <view v-show="TabCur==-1? true:TabCur==content.type" v-for="(content,key) in info" :key="key" @click="on(content.id,content.type)"
					 class="border-bottom items-content-box flex-row align-items-center flex-space-between">
						<view class="item-content flex-column">
							<view class="company flex-row font-14px flex-space-between">
								<text class="serial lin-hid">客户公司：{{content.user_dep}}</text>
								<text class="details" @tap="on">查看详情</text>
							</view>
							<view class="fuselage-number font-12px flex-space-between">
								<text class="state">机身号：{{content.number}}</text>
							</view>
							<view class="cretedate font-10px flex-space-between">
								<text>
									创建日期：{{content.createTime}}
								</text>
							</view>
						</view> 
					</view> -->
					
					<view  v-for="(content,key) in info" :key="key" @click="on(content.id,content.type)"
					 class="border-bottom items-content-box flex-row align-items-center flex-space-between">
						<!-- <view class="item-img ">
							<image :src="content.file[0].file" class="my-img "></image>
						</view> -->
						<view class="item-content flex-column">
							<view class="company flex-row font-14px flex-space-between">
								<text class="serial lin-hid">客户公司：{{content.user_dep}}</text>
								<text class="details" >查看详情</text>
							</view>
							<view class="fuselage-number font-12px flex-space-between">
								<text class="state">机身号：{{content.eqnumber}}</text>
							</view>
							<view class="cretedate font-10px flex-space-between">
								<text>">"
									创建日期：{{content.createTime}}
								</text>
							</view>
						</view>  
					</view>
					
					<div v-show="reportType[TabCur+1].itemLength == 0" class="flex-center flex-column" style="height: 800rpx;">
						<image src="/static/erro/nodata.png" style="width: 200rpx;height: 200rpx;"></image>
						<text class="font-color-999">暂无信息...</text>
					</div>
					<uni-pagination  style="z-index: 999; position: fixed; bottom: 20rpx;width: 100%;" :current="page" title="标题文字" :total="total" :pageSize="limit" @change="change"></uni-pagination>
				</view>
			</div>
			
			
			<!-- <no-info v-show="!showflag"></no-info>
			<uni-collapse v-show="showflag" accordion="true">
				<uni-collapse-item v-for="(item,key) in reportType" :key="key" :title="item.type" :showAnimation="true">
					<view style="width: 100%;height: 100%;background-color: #FFFFFF;">
						<view v-show="item.id==content.type" v-for="(content,key) in info" :key="key" @click="on(content.id,content.type)"
						 class="border-bottom items-content-box flex-row align-items-center flex-space-between"> -->
						
						
						<!-- 	<view class="item-img ">
								<image :src="content.file[0].file" class="my-img "></image>
							</view> -->
							
							
							<!-- <view class="item-content flex-column">
								<view class="company flex-row font-14px flex-space-between">
									<text class="serial">客户公司：{{content.user_dep}}</text>
									<text class="details" @tap="on">查看详情</text>
								</view>
								<view class="fuselage-number font-12px flex-space-between">
									<text class="state">机身号：{{content.number}}</text>
								</view>
								<view class="cretedate font-10px flex-space-between">
									<text>
										创建日期：{{content.createTime}}
									</text>
								</view>
							</view> 
						</view>
					</view>
				</uni-collapse-item>-->
			</uni-collapse>
		
		
		</span>
		
	</view>
</template>

<script>
	import uniPagination from '@/components/uni-pagination/uni-pagination.vue'
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import {
		getReportAllList,
		getReportListByEngineerId
	} from '@/api/user/index.js'
	export default {
		components: {
			uniCollapse,
			uniCollapseItem,
			uniPagination
		},
		data() {
			return {
				page:1,
				limit:7,
				total:0,
				TabCur: -1,
				scrollLeft: 0,
				mainflag:false,
				showflag:false,
				defaultImg:'/static/erro/defaultImg.png',
				reportType: [{
							id: -1,
							type: '全部',
							itemLength: 0
						},{
							id: 0,
							type: '巡检',
							itemLength:0
						}, {
							id: 1,
							type: '调试',
							itemLength:0
						}, {
							id: 2,
							type: '保养',
							itemLength:0
						}, {
							id: 3,
							type: '维修',
							itemLength:0
						}, {
							id: 4,
							type: '培训',
							itemLength: 0
						}, {
							id: 5,
							type: '安装',
							itemLength: 0
						} ],
				info: [
				{
					id: '',
					type: '',
					file: [{
						id: '',
						report_id: '',
						file: '',
					}],
					reason: '',
					createTime: '',
				}]
			}
		},
			
	methods: {
			/**
			 * 重置分页信息
			 */
			reset(){
				this.page = 1
				this.limit = 7
			},
			/**
			 * @param {Object} e
			 * 导航栏选择 点击事件
			 */
			tabSelect(id) {
				console.log(id)
				this.reset()
				this.TabCur = id;
				this.getReportList()
				this.scrollLeft = (id - 1 ) * 60
			},
			/**
			 * @param {Object} id 工单id
			 * @param {Object} typeId 工单的类型id
			 * 
			 */
			on(id, typeId) {
				debugger
				uni.navigateTo({
					url: "/pages/views/engineer/WorkStatementDetails/WorkStatementDetails?id=" + id + "&typeId=" + typeId
				})
			},
			/**
			 * 获取工单列表
			 */
			getReportList(){
				getReportListByEngineerId(this.$store.getters.id,this.TabCur,this.limit,this.page).then((res) => {
					this.total = res.result.count
					this.info = res.result.data
					this.reportType[0].itemLength = this.info.length
					this.info.forEach((item)=>{
						if(item.type == this.reportType[item.type + 1].id){
							this.reportType[item.type + 1].itemLength ++
						}
						// let defaultfile = [{
						// 	file: this.defaultImg,
						// }] 
						// if(item.file.length == 0 || item.file[0].file == ''){
						// 	item.file = defaultfile
						// }
					})
					uni.hideLoading()
					this.mainflag = true
					this.showflag = true
					console.log(this.info)
					console.log(this.reportType)
				})
			},
			/**
			 * 分页上一页下一页事件
			 * 
			 */
			change(type){
				this.page = type.current
				this.getReportList()
				console.log("limit"+this.limit)
				console.log("page"+this.page)
				
			}
		},
		onShow() {
			/**
			 * 检验当前是否已经登录
			 */
			let curRoute = this.$mp.page.route;
			this.$intercept.permission(curRoute)
		},
		onLoad() {
			uni.startPullDownRefresh();
			 this.getReportList()
		},
		onPullDownRefresh() {
			this.getReportList()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style scoped>
	.item {
		background-color: #FFFFFF;
	}

	.items-content-box {
		margin: 0 auto;
		background-color: #FFFFFF;
		width: 93%;
		color: #999999;
	}

/* 	.item-img {
		height: 132rpx;
		width: 20%;
	} */

	.item-content {
		height: 140rpx;
		width: 100%;
	}
	.details{
		color: #09BB07;
	}
	.company {
		color: #ec8b89;
		height: 37.66%;
		line-height: 52.7rpx;
	}

	.fuselage-number {
		height: 31.33%;
		line-height: 43.4rpx;

	}
	.my-nav{
		position: sticky;
		top: 0;
	}
</style>
